var ImportMaterial = function () {
  var template = /* html */ `
    <div class="import-material" v-loading.fullscreen.lock="loading">
      <search-btn-view immediate append-to-body btn-text="查询物料" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search" type="material"></search-form>
        </div>
        <template slot="append">
          <el-button type="primary" size="medium" @click="importMaterials">导入现货</el-button>
        </template>
      </search-btn-view>
      <div class="import-material-table-div">
        <el-table fit stripe border :data="materialList" style="width: 100%" height="parent" @selection-change="toSelectMaterial">
          <el-table-column :resizable="false" type="selection" fixed="left" width="40px" align="center"></el-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="model" label="规格" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="color" label="编号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="colorDescription" label="描述" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialDeptName" label="物料部门" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="providerNo" label="供方编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="count" label="库存" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="unitPrice" label="单价" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="status" label="状态" width="50px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="purchaseApproval" label="是否审核" width="70px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.purchaseApproval===1?'是':'否'}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  `;

  return {
    props: {
      open: {
        type: Boolean,
        required: false
      }
    },

    watch: {
      open: function (val) {
        if (val && this.isRefresh) {
          this.setMaterialList();
          this.isRefresh = false;
        }
      }
    },

    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        providerNo: '',
        colorDescription: '',
        defaultWarehouse: '原材料仓',
        status: 1,
        materialDept: ''
      };
      return {
        loading: false,
        materialList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        isRefresh: false,
        selectMaterialList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        }
      };
    },

    methods: {
      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          view: search.status,
          providerNo: search.providerNo,
          isSpot: 0
        };
        var fields = ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'defaultWarehouse'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        this.loading = true;
        var self = this;
        return ajaxRequest("basicData/queryMaterialCompany", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          if (materialList.length === 0 && currentPage > 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setMaterialList(isSearch);
            });
            return;
          }

          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            var materialDeptId = material.materialDeptId;
            if (SysUtil.isEmpty(materialDeptId) || materialDeptId === 0) {
              materialDeptId = '';
            }
            var materialDeptName = material.materialDeptName;
            if (SysUtil.isEmpty(materialDeptName)) {
              materialDeptName = '';
            }
            material.materialDeptId = materialDeptId;
            material.materialDeptName = materialDeptName;
          }

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.currentMaterial = null;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      toSelectMaterial: function (materialList) {
        this.selectMaterialList = materialList;
      },

      importMaterials: function () {
        var materialList = this.selectMaterialList;
        if (materialList.length === 0) {
          this.$alert('请选择需要导入到现货表的物料', '信息');
          return;
        }

        var ids = _.map(materialList, 'id');
        this.loading = true;
        var self = this;
        ajaxRequest('basicData/updateCompanyMaterialIsSpot', {
          id: ids.join(','),
          isSpot: 1
        }).then(function () {
          self.$alert('从物料表成功导入物料到现货表', '信息', {
            callback: function () {
              self.isRefresh = true;
              self.$emit('import-success');
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    },

    template: template
  };
}();
